Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@spectrum-web-components/overlay

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/overlay

0.5.2
Source
npm

Version published: 4 years ago

Maintainers: 5

Created: 5 years ago

Source

Description

To ensure that content the requires it (modals, menus, etc) can escape overflow rules, the z-index, et al, Spectrum Web Components provides an overlay system that is made up of three interrelated elements, <overlay-trigger>, <active-overlay>, and <sp-theme>. DOM that should be overlaid on hover ([slot="hover-content"]) and click ([slot="click-content"]) are outlined in the light DOM content of an <overlay-trigger>. Said content will be overlayed onto the DOM via an <active-overlay> element that will be appended to the <body>. Content delivered in this way will acquire CSS Custom Properties for color and size from the trigger's nearest ancestor <sp-theme>.

Note: Cascading styles not applied via <sp-theme> are not currently projected along with the overlay content. To ensure that any additionoal styles for the overlaid content are applied, use the style attribute directly or encapsulate this content in a custom element that applies its styles via shadow DOM.

Usage

yarn add @spectrum-web-components/overlay

Import the side effectful registration of <active-overlay> or <overlay-trigger> via:

import '@spectrum-web-components/overlay/active-overlay.js';
import '@spectrum-web-components/overlay/overlay-trigger.js';

The default of <overlay-trigger> will load various dependencies asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of <overlay-trigger> as follows:

import '@spectrum-web-components/overlay/sync/overlay-trigger.js';

When looking to leverage the ActiveOverlay or OverlayTrigger base class as a type and/or for extension purposes, do so via:

import {
    ActiveOverlay,
    OverlayTrigger
} from '@spectrum-web-components/overlay';

Example

<style>
    overlay-trigger {
        flex: none;
    }

    .tooltip {
        background-color: var(--spectrum-global-color-gray-800);
        color: var(--spectrum-global-color-gray-50);
        padding: 4px 10px;
        font-size: 10px;
    }
</style>
<overlay-trigger id="trigger" placement="bottom" offset="6">
    <sp-button variant="primary" slot="trigger">
        Bottopopover
    </sp-button>
    <sp-popover dialog slot="click-content" direction="bottom" tip open>
        <div class="options-popover-content">
            <sp-slider
                value="5"
                step="0.5"
                min="0"
                max="20"
                label="Awesomeness"
            ></sp-slider>
            <sp-button>Press me</sp-button>
        </div>
    </sp-popover>
    <sp-tooltip slot="hover-content" delayed open>
        Tooltip
    </sp-tooltip>
</overlay-trigger>

Keywords

FAQs

What is @spectrum-web-components/overlay?

Is @spectrum-web-components/overlay well maintained?

Package last updated on 19 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@spectrum-web-components/overlay

Description

Usage

Example

Keywords

Related posts

Malicious npm Package Targets Solana Developers and Hijacks Funds

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft